<template>
	<view class='pages'>
		<scroll-view scroll-y="true" class='contentbox' @scrolltolower="scrolltolower">
			<view v-if="list.length == 0">
				<view style="height: 100rpx;"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes" v-for="(item,index) in list" :key="index" @click.stop="detail(item.goods_id,item.name)">
				<view class="uniBtn2 box">
					<view class="uniFlex b">
						<image class="b1" :src="item.image" mode=""></image>
						<view class="b2">
							<view>{{item.name}}</view>
							<view>套餐描述：{{item.detail}}</view>
							<view>￥{{item.min_price}}</view>
						</view>
					</view>
					<view>
						<image class="del" @click.stop="del(index,item.goods_id)" src="@/static/mains/m9.png" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				length: true,
				list: []
			}
		},
		async onLoad() {
			await this.getList();
		},
		methods: {
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉')
				// 关闭下拉
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 上拉
			scrolltolower() {
				console.log('触底')
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 列表
			async getList() {
				let res = await this.$api.collectlists({
					page_no: this.page,
					page_size: this.limit,
				});
				if (res.code == 1) {
					this.length = res.data.lists.length == this.limit;
					this.list.push(...res.data.lists);
					// 关闭下拉
					uni.stopPullDownRefresh();
				}
			},
			// 详情
			detail(id,title) {
				uni.navigateTo({
					url: '/pages/index/rooms/detail?roomid=' + id+'&title='+title
				});
			},
			// 删除
			del(index,id){
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否确认删除！',
					cancelColor: '#B3B3B3',
					confirmText: '确定',
					confirmColor: '#E2867E',
					// showCancel:false,
					success: function(res) {
						if (res.confirm) {
							that.tabCollect(index,id)
						} else if (res.cancel) {
							
						}
					}
				});
			},
			async tabCollect(index,id) {
				let res = await this.$api.handleCollectgoods({
					goods_id: id,
					is_collect: 0
				});
				if (res.code == 1) {
					uni.showToast({
						title: '操作成功'
					});
					this.list.splice(index, 1);
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.pages {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.contentbox {
		flex: 1;
		overflow: hidden;
		padding: 30rpx 0;

		.boxes {
			margin: 0rpx 30rpx 20rpx 30rpx;
			padding: 10rpx 30rpx;
			position: relative;
			background: #fff;
			border-radius: 20rpx;
			height: 240rpx;

			.box {
				margin: 30rpx 0;
				align-items: flex-end;

				.b {
					font-size: 24rpx;

					.b1 {
						width: 150rpx;
						height: 150rpx;
					}

					.b2 {
						margin: 0 30rpx;
						flex: 1;
						view {
							&:nth-child(1) {
								font-size: 28rpx;
								color: #000;
								font-weight: bold;
							}

							&:nth-child(2) {
								font-size: 20rpx;
								color: #525252;
								margin: 10rpx 0;
								overflow: hidden;
								text-overflow: ellipsis;
								// 只要超过宽度就换行，不论中文还是英文
								word-break: break-all;
								//最多展示两行
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp:2;
							}
							
							&:nth-child(3) {
								font-size: 24rpx;
								color: #AA3128;
								background: url('https://z1.ax1x.com/2023/09/15/pPWQme1.png') no-repeat;
								background-size: 100% 100%;
								width: 135rpx;
								height: 35rpx;
							}
						}
					}
				}

				.money {
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		
			.del{
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
</style>